<script lang="ts" setup>
//菜单右边
import { ref } from "vue";
import { Search, ArrowDown, CircleCloseFilled } from "@element-plus/icons-vue";
import { storeToRefs } from "pinia";
import useStatus from "@/store/status";

// 实例化 store
const Status = useStatus();
//解构
const { menuSwitch } = storeToRefs(Status);
//当menuSwitch为true时，展开菜单
//通过菜单按钮控制状态
const switchMenu = () => {
  //切换状态
  Status.changeMenu();
};

const switchChild = () => {
  Status.changeChild();
};

//切换搜索按钮
//按钮状态
const activeSearch = ref(false);
const switchSearch = () => {
  activeSearch.value = !activeSearch.value;
};

//存储待搜索的值
const keywords = ref();
</script>

<template>
  <div class="ac-ln-menu" :class="{ 'active-menu': activeSearch }">
    <div class="ac-ln-menu-tray">
      <ul class="ac-ln-menu-items">
        <!--测试菜单 -->
        <li class="ac-ln-menu-item">
          <el-button text class="nr-sf-link bt-menu">
            <router-link to="/">首页</router-link>
          </el-button>
        </li>

        <li class="ac-ln-menu-item">
          <el-button text class="nr-sf-link bt-menu">
            <router-link to="/single/2311">文章页</router-link>
          </el-button>
        </li>
        <li class="ac-ln-menu-item">
          <el-button text class="nr-sf-link bt-menu">
            <router-link to="/category/1">分类页</router-link>
          </el-button>
        </li>
        <li class="ac-ln-menu-item">
          <el-button text class="nr-sf-link bt-menu">
            <router-link to="/404">404页</router-link>
          </el-button>
        </li>
        <li class="ac-ln-menu-item">
          <el-button text class="nr-sf-link bt-menu">
            <router-link to="/test">测试页</router-link>
          </el-button>
        </li>
       

        <!--左边-->
        <li class="ac-ln-menu-item">
          <div class="ac-ln-menu-link nr-sf-content">
            <form class="nr-sf" :action="`/search/${keywords}`">
              <div class="nr-sf-wrapper">
                <input
                  type="text"
                  placeholder="Newsroom 搜索"
                  v-model="keywords"
                  class="nr-sf-input"
                />
                <el-button
                  text
                  type="primary"
                  size="default"
                  class="nr-sf-close"
                  :icon="CircleCloseFilled"
                  @click="switchSearch"
                ></el-button>
              </div>
            </form>
            <el-button
              text
              class="nr-sf-link bt-search"
              :icon="Search"
              @click="switchSearch"
            >
              Newsroom 搜索
            </el-button>
          </div>
        </li>
        <!--右边-->
        <li class="ac-ln-menu-item">
          <el-button
            text
            class="nr-sf-link bt-menu"
            :class="{ active: menuSwitch }"
            @click="switchMenu"
          >
            热门话题
            <el-icon><ArrowDown /></el-icon>
          </el-button>
        </li>
        <!--热门话题 - 移动端菜单-->
        <div class="topics--narrow">
          <label for="topics-list" class="topics-label">热门话题</label>
          <ul id="topics-list" class="topics-list">
            <!--开始循环-->
            <li class="topic-item" v-for="item in 16">
              <a href="#" class="topic-link">
                <span>AirPods</span>
              </a>
            </li>
          </ul>
        </div>
      </ul>
    </div>
    <!--切换图标-->
    <div class="ac-ln-actions">
      <div class="ac-ln-action ac-ln-action-menucta">
        <label class="ac-ln-menucta">
          <span class="ac-ln-menucta-chevron">
            <el-button
              text
              size="default"
              @click="switchChild"
              :icon="ArrowDown"
            ></el-button>
          </span>
        </label>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.ac-ln-menu {
  letter-spacing: 0em;

  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  float: right;
  margin-top: 0;
}

.ac-ln-menu-tray {
  transition-property: height, visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
  transition-duration: 0.4s;
  transition-delay: 0s, 0.4s;

  float: left;
  padding-top: 18px;
  .ac-ln-menu-item {
    position: relative;
    margin-left: 52px;
    float: left;
    list-style: none;
    .nr-sf-content {
      min-width: 234px;
      text-align: right;
    }
    .ac-ln-menu-link {
      color: #1d1d1f;
      display: inline-block;
      line-height: 22px;
      white-space: nowrap;
    }
  }
}

.nr-sf-link {
  opacity: 1;
  transition: opacity 500ms ease-in 200ms;
}

button.nr-sf-link {
  font-size: 1em;
  border: 0;
}
.nr-sf-link.bt-search {
  i {
    padding-right: 0.3em;
  }
}
.nr-sf-link.bt-menu {
  i {
    margin-left: 6px;
    //切换动画
    transition: transform 0.3s ease;
  }
}

//隐藏移动端菜单
.topics--narrow {
  display: none;
}

//细节微调
.nr-sf-link {
  a {
    color: #1d1d1f;
  }
}
.nr-sf-link:hover {
  a {
    color: #06c;
  }
}
//动画
.active {
  i {
    transform: scaleY(-1);
  }
}

//搜索
#ac-localnav {
  .nr-sf-wrapper {
    box-sizing: border-box;
  }
  .nr-sf-input {
    border: none;
    border-bottom: 1px solid #86868b;
    border-radius: unset;
    outline: none;
    box-sizing: border-box;
    background: transparent;
    line-height: 1em;
    height: 2em;
    width: 100%;
    padding-right: 1.47em;
    color: #1d1d1f;
  }
  input {
    font-synthesis: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    text-align: left;
  }
  //* {
  //  font-size: 1em;
  //  font-family: inherit;
  //  font-weight: inherit;
  //  line-height: inherit;
  //  text-align: inherit;
  //}

  .nr-sf-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    cursor: pointer;
    color: #86868b;
    line-height: 1;
    border-radius: 100%;
  }
  button {
    font-synthesis: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: ltr;
    text-align: left;
  }
}

//搜索菜单
//关闭
#ac-localnav .nr-sf {
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms ease-out 400ms;
  height: 0;
  width: 0;
  font-size: 0;
}
//打开
#ac-localnav .active-menu {
  .nr-sf {
    visibility: visible;
    opacity: 1;
    height: 100%;
    width: 100%;
    font-size: inherit;
    transition: opacity 500ms ease-in 200ms;
  }

  .ac-ln-menu-link > button {
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease-out 400ms;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
  }
}

//移动端菜单
.ac-ln-actions {
  float: left;
  padding-top: 18px;
}
.ac-ln-action-menucta {
  display: none;
}
.ac-ln-action-menucta {
  margin-top: -2px;
  position: relative;
  z-index: 1;
}
.ac-ln-action {
  margin-left: 24px;
  float: left;
}
.ac-ln-menucta {
  margin-right: -11px;
  cursor: pointer;
  display: block;
  overflow: hidden;
  width: 40px;
  height: 30px;
  -webkit-tap-highlight-color: transparent;
}
.ac-ln-menucta-chevron {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (max-width: 767px) {
  .ac-ln-menu {
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    padding-top: 0;
    //width: 100%;
    float: right;
    margin-top: 0;
  }

  .ac-ln-menu-tray {
    max-height: none;
    height: 0;
    visibility: hidden;

    float: none;
    overflow: hidden;
    pointer-events: none;

    width: 100%;
    padding-top: 0;

    display: none;
  }
  .ac-ln-menu-items {
    opacity: 1;
    padding-bottom: 6.35294em;
    transform: none;
  }
  .ac-ln-menu-items {
    display: flex;
    flex-flow: column;
    padding: 4px 24px 24px;
  }
  .ac-ln-menu-item {
    margin-left: 0;
    display: inline-block;
    float: none;
    width: 100%;
    height: 44px;
  }
  .ac-ln-menu-item:nth-child(1) .ac-ln-menu-link {
    opacity: 0;
    transform: translate3d(0, -20px, 0);

    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
    transition-duration: 0.4s, 0.2s;

    transition-delay: 0s;
  }
  .ac-ln-menu-item:first-child .ac-ln-menu-link {
    border-top: 0;
  }

  .nr-sf-content {
    min-width: 234px;
    text-align: left;
  }
  .ac-ln-menu-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    line-height: 1.3;
  }
  .nr-sf-wrapper {
    border: none;
  }
  .nr-sf-input {
    border: none;
    line-height: 1.5em;
    height: auto;
    padding-right: 2.58em;
  }
  .nr-sf-close {
    line-height: inherit;
  }
  .btn-topics {
    display: none;
  }
  .topics--narrow {
    display: block;
    margin-top: 5px;
    color: #1d1d1f;
    .topics-label {
      display: block;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, 0.16);
    }
    .topics-list {
      margin: 16px 16px 0 16px;
    }
    .topic-item {
      margin-top: 14px;
      opacity: 0;
      transform: translate3d(0, -20px, 0);
    }
    .topic-item {
      transition-property: transform, opacity;
      transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
      transition-duration: 0.4s, 0.2s;
      transition-delay: 0s;
      transition-delay: 0s;
    }
    .topic-link {
      color: inherit;
    }
    ul {
      list-style: none;
    }
  }
  //切换按钮
  .ac-ln-actions {
    padding: 16px 16px 0;
  }
  .ac-ln-action-menucta {
    display: block;
  }
}

//移动端菜单 - 默认关闭
//移动端菜单 - 展开
//
//#ac-ln-menustate:checked ~ #ac-localnav .ac-ln-menu-tray {
//    max-height: none;
//    overflow: visible;
//    height: 100%;
//    visibility: visible;
//}
</style>
